<!-- eslint-disable vue/valid-attribute-name -->
<template>
  <el-card style="height: 80px">
    <el-form :inline="true" class="form">
      <el-form-item label="反馈状态:">
        <el-select
          v-model="value"
          placeholder="选择反馈状态"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
        <el-button type="default" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 0px">
    <!-- table展示反馈信息 -->
    <el-table style="margin: 10px 0px" border :data="feedbackList">
      <el-table-column label="#" align="center" type="index"></el-table-column>
      <el-table-column
        label="反馈内容"
        align="center"
        prop="content"
        width="300px"
      ></el-table-column>
      <el-table-column
        label="反馈人"
        align="center"
        prop="contact_name"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="反馈人联系方式"
        align="center"
        prop="contact_way"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="反馈图片" prop="images" width="300">
        <template #="{ row }">
          <el-image
            v-if="row.images.length"
            :src="row.images[0]"
            style="height: 100px"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="row.images.map((item: any) => item)"
            :initial-index="0"
            fit="cover"
            preview-teleported
          ></el-image>
          <el-tag type="info" size="large" v-else>暂无反馈图片</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="反馈时间"
        align="center"
        prop="create_time"
        show-overflow-tooltip
      >
        <template #="{ row }">
          {{ formatDateTime(row.create_time) }}
        </template>
      </el-table-column>
      <el-table-column
        label="回复时间"
        align="center"
        prop="update_time"
        show-overflow-tooltip
      >
        <template #="{ row }">
          {{ row.answer ? formatDateTime(row.update_time) : '未回复' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="ChatDotRound"
            @click="openAnswer(row)"
          >
            回复
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="centerDialogVisible"
      title="回复"
      width="500"
      align-center
    >
      <el-input
        v-model="answer"
        placeholder="请输入回复内容"
        type="textarea"
        autosize
      ></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="answerFeedback">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[5, 7, 9, 11]"
      :background="true"
      @current-change="getAllFeedback"
      @size-change="handler"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import {
  reqGetAllFeedback,
  reqUpdateFeedbackAnswer,
} from '@/api/front/feedback'
import { formatDateTime } from '@/utils/time'
import { ElMessage } from 'element-plus'
import useLayOutSettingStore from '@/store/modules/settings'
// let base = ref(import.meta.env.VITE_SERVE + '/public/uploads/')

let pageNo = ref<number>(1)
let pageSize = ref<number>(5)
let total = ref<number>(0)

let feedbackList = ref<any>([])
let centerDialogVisible = ref<boolean>(false)

// 获取模板setting仓库
let settingStore = useLayOutSettingStore()
// 回复内容
let answer = ref<string>('')

let feedbackParams = ref({ id: 0 })

let options = ref<any>([
  {
    value: '1',
    label: '已回复',
  },
  {
    value: '2',
    label: '未回复',
  },
])
let value = ref('')
onMounted(() => {
  getAllFeedback()
})
// 获取全部已有的反馈信息
const getAllFeedback = async (pager = 1, type = 0) => {
  // 收集当前页码
  pageNo.value = pager
  let result: any = await reqGetAllFeedback(pageNo.value, pageSize.value, type)

  if (result.code == 200) {
    feedbackList.value = result.data
    total.value = result.total
  }
}
const openAnswer = (row: any) => {
  centerDialogVisible.value = true
  answer.value = row.answer
  Object.assign(feedbackParams.value, row)
}

const answerFeedback = async () => {
  let params = {
    id: feedbackParams.value.id,
    answer: answer.value,
  }
  let result = await reqUpdateFeedbackAnswer(params)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '回复成功',
    })
    getAllFeedback()
    centerDialogVisible.value = false
  }
}
const handler = () => {
  getAllFeedback()
}

// 搜索按钮回调
const search = () => {
  getAllFeedback(1, +value.value)
}
// 重置按钮回调
const reset = () => {
  settingStore.refresh = !settingStore.refresh
}
</script>

<style lang="scss" scoped></style>
